@use '@/assets/styles/variables.scss';
@use '@/assets/styles/mixin.scss';

@mixin createBlockCommonStyles($selector) {
  @include mixin.createCssFromOutsideBasicStyles('&');
  #{$selector} {
    display: flex;
    flex-wrap: nowrap;
  }
}

.lc-block {
  @include createBlockCommonStyles('&.lc-block__columns');

  > * + * {
    margin-left: var(--block-interval);
  }
  > .lc-rower {
    > .lc-form-item {
      width: 100%;
    }
  }
}

.lc-buttonGroup {
  @include mixin.createCssFromStyles('&.lc-buttonGroup');
  & {
    display: flex;
    box-sizing: border-box;
    min-height: 42px;
    padding: 5px 0;
  }
  &__level {
    flex-direction: row;
    .lc-comp__outerWrap + .lc-comp__outerWrap {
      margin-left: 20px;
    }
  }
  &__vertical {
    flex-direction: column;
    .lc-comp__outerWrap + .lc-comp__outerWrap {
      margin-top: 20px;
    }
  }
  &__empty {
    position: relative;
    padding: 5px 10px;
    &::before {
      position: absolute;
      content: '按钮组组件 - 只能添加按钮组件';
      display: inline-block;
      line-height: 30px;
      color: var(--text-color-4);
    }
  }
  &__center {
    justify-content: center;
  }
  &__left {
    justify-content: left;
  }
  &__right {
    justify-content: right;
  }
  .lc-comp__outerWrap {
    display: inline-block;
  }
}

.lc-card {
  @include mixin.createCssFromStyles('&');
  &__wrapper {
    padding: 10px;
  }
}

.lc-card2 {
  @include mixin.createCssFromStyles('&');
  @include mixin.createCssFromOutsideBasicStyles('&');
  @include mixin.createCssFromCardLabelStyles('&');
  .lc-card2__header {
    position: relative;
    top: -1px;
    left: -1px;
  }
  .lc-card2__body {
    min-height: 60px;
  }
}

.lc-collapse {
  &[style*='--itemPaddingBottom'] {
    .el-collapse-item__content {
      padding-bottom: var(--itemPaddingBottom);
    }
  }
  .el-collapse-item__header {
    justify-content: flex-end;
    flex-direction: row-reverse;
    background-color: var(--collapse-head-bg-color);
    .el-collapse-item__arrow {
      margin: 0 8px;
      font-size: 16px;
      transform: rotate(-90deg);
      &.is-active {
        transform: rotate(90deg);
      }
    }
  }
}

.el-dialog {
  margin-left: var(--margin-left, auto);
  height: var(--height, auto);
}

.lc-editorTable {
  @include mixin.createCssFromOutsideBasicStyles('&');
  & {
    --form-input-width: 100%;
  }
  &__operates {
    white-space: nowrap;
    .lc-svg-icon {
      // width: 1.5em;
      // height: 1.5em;
      cursor: pointer;
      & + .lc-svg-icon {
        margin-left: 5px !important;
      }
    }
  }
  &__hideAdd .lc-editorTable__addBtn,
  &__hideDelete .lc-editorTable__deleteBtn,
  &__hideSort .lc-editorTable__sortBtn {
    display: none;
  }
  .el-input {
    ::v-deep .el-input__inner {
      border-color: #dcdfe6;
      &:focus {
        border-color: #409eff;
      }
    }
    &.is-error {
      ::v-deep .el-input__inner {
        border-color: #f56c6c;
      }
    }
  }
  .el-textarea {
    ::v-deep .el-textarea__inner {
      border-color: #dcdfe6;
      &:focus {
        border-color: #409eff;
      }
    }
    &.is-error {
      ::v-deep .el-input__inner {
        border-color: #f56c6c;
      }
    }
  }
  &__operate-header {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 10px;
  }
}
.lc-editorTable-wrapper {
  max-width: 100%;
  height: 100%;
  display: inline-block;
  .lc-editorTable-error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

.lc-form {
  @include mixin.createCssFromStyles('&>.el-form');
  &.lc-form__adaptive-self {
    & > .el-form {
      display: inline-block;
      text-align: initial;
      &.lc-editor__form {
        min-width: 50%;
      }
      .el-form-item + .el-form-item {
        margin-left: var(--formItemSpace);
      }
    }
  }
  &.lc-form__adaptive-parent {
    & > .el-form {
      & > .lc-rower {
        & > .el-form-item {
          padding-left: 10px;
          padding-right: 10px;
          box-sizing: border-box;
        }
      }
    }
  }
  &.lc-form__position-left {
    text-align: left;
  }
  &.lc-form__position-center {
    text-align: center;
  }
  &.lc-form__position-right {
    text-align: right;
  }
  .el-form--label-top {
    .el-form-item__label {
      padding-bottom: 0;
    }
  }
  &[style*='--columns'] {
    & > .el-form {
      width: calc(
        var(--label-width) * var(--columns) + var(--form-input-width, 240px) * var(--columns) + var(--formItemSpace) *
          calc(var(--columns) - 1)
      );
    }
  }
}

$formItem: lc-form-item;
.#{$formItem} {
  &.el-form-item__labelTop {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
  .#{$formItem}__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: var(--form-input-width, 240px);
    min-height: var(--form-input-height, 32px);
    &.#{$formItem}__box-mul-column {
      width: var(--form-input-width, 240px);
      flex-wrap: nowrap;
      > [class^='lc-']:not(.#{$formItem}__box-comp) {
        flex-shrink: 0;
      }
      .#{$formItem}__box-comp {
        width: 0;
        flex-basis: 100%;
      }
    }
  }
  .#{$formItem}__box-empty {
    height: var(--input-height, 32px);
  }
  & + .#{$formItem} {
    // 表单输入项间距
    margin-left: var(--formItemSpace, 0);
  }
  &[style*='--columns'] {
    width: calc(
      var(--label-width, 100px) * var(--columns) + var(--formItemSpace) * calc(var(--columns) - 1) +
        var(--form-input-width, 240px) * var(--columns)
    );
  }
}

.lc-list-filter {
  @include mixin.createCssFromOutsideBasicStyles('&');
}
$nb: lc-narrowBroad;
.#{$nb} {
  @include mixin.createCssFromStyles('&');
  & {
    display: flex;
    padding: 10px;
  }
  &__side {
    position: relative;
    width: auto;
    min-width: var(--narrow-width, 200px);
    margin-right: var(--interval);
    &--small {
      flex: 0 0 160px;
    }
    &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 100%;
      right: calc(-1 * var(--interval));
      top: 0px;
    }
  }
  &__main {
    position: relative;
    flex: 1;
    width: 0;
    margin-left: var(--interval, 16px);
    padding: 20px;
    &::before {
      content: '';
      position: absolute;
      width: 0;
      height: 100%;
      left: calc(-1 * var(--interval));
      top: 0px;
    }
  }
  // side和main调整顺序的样式
  &--reverse {
    .#{$nb}__main {
      margin-left: 0;
      margin-right: var(--interval);
      &::before {
        left: auto;
        right: calc(-1 * var(--interval));
      }
    }
    .#{$nb}__side {
      margin-right: 0;
      margin-left: var(--interval);
      &::after {
        left: calc(-1 * var(--interval));
        right: auto;
      }
    }
  }
  &[style*='--narrowAlignItems'] {
    & > .lc-narrowBroad__side {
      display: flex;
      flex-direction: column;
      justify-content: var(--narrowAlignItems);
    }
  }
  &[style*='--broadAlignItems'] {
    & > .lc-narrowBroad__main {
      display: flex;
      flex-direction: column;
      justify-content: var(--broadAlignItems);
    }
  }
  &.lc-narrowBroad--hasBoundary {
    .lc-narrowBroad__side {
      &::after {
        border-right: 1px dotted var(--line-segmentation-color);
      }
    }
    .lc-narrowBroad__main {
      &::before {
        border-right: 1px dotted var(--line-segmentation-color);
      }
    }
  }
}

$lcNarrowBroadBaseSpace: 20px;
.lc-narrowBroadBase {
  display: flex;
  height: 100%;
  &__side {
    position: relative;
    flex: 0 0 150px;
    margin-right: $lcNarrowBroadBaseSpace;
    &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 100%;
      right: -1 * $lcNarrowBroadBaseSpace;
      top: 0px;
      border-right: 1px dotted var(--line-segmentation-color);
    }
  }
  &__navBar {
    line-height: 25px;
    padding: 0 10px;
  }

  &__main {
    position: relative;
    flex: 1;
    width: 0;
    margin-left: $lcNarrowBroadBaseSpace;

    &::before {
      content: '';
      position: absolute;
      width: 0;
      height: 100%;
      left: -1 * $lcNarrowBroadBaseSpace;
      top: 0px;
      border-right: 1px dotted var(--line-segmentation-color);
    }
  }

  &-inverse {
    flex-direction: row-reverse;
    .lc-narrowBroadBase__side {
      margin-left: $lcNarrowBroadBaseSpace;
      margin-right: 0;
      &::after {
        left: -1 * $lcNarrowBroadBaseSpace;
        right: auto;
      }
    }
    .lc-narrowBroadBase__main {
      margin-right: $lcNarrowBroadBaseSpace;
      margin-left: 0;
      &::before {
        right: -1 * $lcNarrowBroadBaseSpace;
        left: auto;
      }
    }
  }

  &__perTab {
    &-title {
      line-height: 25px;
      font-weight: bold;
      font-size: 20px;
    }
    &-content {
      min-height: 300px;
    }
  }
}

.lc-rower {
  @include mixin.createCssFromStyles('&');
  &{
    display: flex;
    align-items: center;
    padding: 0;
  }

  .el-form-item {
    max-width: 100%;
  }
}

.lc-tabsNav {
  @include mixin.createCssFromOutsideBasicStyles('&');
  &{
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  .lc-narrowBroadBase {
    &__main {
      max-height: var(--max-height, 100%);
    }
    &__side,
    &__main {
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
  &__navBar {
    line-height: 26px;
    font-size: 14px;
    color: var(--text-color-3);
    @include mixin.overHide(1);
    cursor: pointer;
    &:hover,
    &-active {
      transition: 0.15s ease-out;
      color: var(--active-block-bg-color);
    }
  }
  &__perTab {
    &-title {
      line-height: 25px;
      font-weight: bold;
      font-size: 20px;
    }
    &-content {
      min-height: 100px;
      padding: 10px 0;
    }
  }
}

$table-style-list: color, line-height, font-size, font-weight, letter-spacing, text-align,
  text-decoration-line, opacity;
.lc-table {
  .el-table__header th {
    background-color: var(--table-header-background-color, #f7f8fa) !important;
  }
  @include mixin.createCssByAttributesImportant('&.el-table', $table-style-list...);
  &__operateColumn {
    &__buttonWrapper {
      display: flex;
      justify-content: space-around;
    }
  }
  &.el-table--striped {
    .el-table__body {
      tr.el-table__row--striped {
        td.el-table__cell {
          background-color: var(--table-stripe-background-color);
        }
      }
    }
  }
  ::v-deep .cell {
    white-space: nowrap;
    text-overflow: unset;
  }
  .el-table__expand-icon {
    svg {
      display: none;
    }
    .el-icon:before {
      content: '+';
      width: 12px;
      height: 12px;
      font-style: normal;
      border: 1px solid#dcdfe6;
      padding: 0 2px;
    }
  }
  .el-table__expand-icon--expanded {
    transform: rotate(0deg);
    svg {
      display: none;
    }
    .el-icon:before {
      content: '-';
      width: 12px;
      height: 12px;
      font-style: normal;
      border: 1px solid #dcdfe6;
      padding: 0 2px;
    }
  }
}

.lc-tabs {
  @include mixin.createCssFromOutsideBasicStyles('&.el-tabs');
  @include mixin.createCssFromTabsItemsStyles('& .el-tabs__item.is-active');
  @include mixin.createCssFromTabsItemsStyles('& .el-tabs__active-bar');
  &.lc-tabs--top-right,
  &.lc-tabs--bottom-right {
    .el-tabs__nav {
      float: right;
    }
  }
  .el-tabs__content {
    padding: 0 15px 15px 15px;
  }
  &.lc-tabs--top-center,
  &.lc-tabs--bottom-center {
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: space-around;
      .el-tabs__nav {
        float: none;
      }
    }
  }
  &.el-tabs--left.el-tabs--card,
  &.el-tabs--right.el-tabs--card {
    .el-tabs__nav {
      border-bottom: none;
    }
  }
  &--card {
    .el-tabs__nav-wrap {
      margin-bottom: -7px;
    }
    .el-tabs__nav {
      border-bottom: none;
    }
    .el-tabs__item {
      background-color: var(--block-bg-color-2);
      &.is-active {
        background-color: var(--block-bg-color);
      }
      &.is-disabled {
        cursor: not-allowed;
      }
    }
  }
  &--capsule {
    .el-tabs__header {
      &.is-left,
      &.is-right {
        .el-tabs__nav-wrap {
          .el-tabs__item {
            border-right: 1px solid var(--border-color);
            &:not(:last-child) {
              border-bottom: none;
              &.is-active {
                border-bottom: 1px solid var(--border-color);
              }
            }
            &:nth-child(2) {
              border-radius: 2px 2px 0 0;
            }
            &:last-child {
              border-radius: 0 0 2px 2px;
            }
            &.is-active {
              border-color: var(--border-color-1) !important;
              border-right: 1px solid var(--border-color);
            }
          }
          .el-tabs__item.is-active + .el-tabs__item {
            border-top: none;
            border-left: 1px solid var(--border-color);
          }
        }
      }
      &.is-right {
        .el-tabs__nav-wrap .el-tabs__item:last-child.is-active {
          border-right: 1px solid var(--border-color-1);
        }
      }
      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
        .el-tabs__active-bar {
          display: none;
        }
        .el-tabs__item {
          border: 1px solid var(--text-color-4);
          border-right: none;
          line-height: 32px;
          max-width: 96px;
          padding: 0 15px !important;
          overflow: hidden;
          &:nth-child(2) {
            border-radius: 2px 0 0 2px;
          }
          &:last-child {
            border-right: 1px solid var(--border-color);
            border-radius: 0 2px 2px 0;
          }
          &.is-active {
            border-color: var(--border-color-1);
            border-right: 1px solid var(--border-color-1);
            background-color: var(--block-bg-color-1);
            color: var(--text-color-5);
          }
          &:hover {
            color: var(--text-color-5);
          }
          &.is-disabled {
            background-color: #f2f3f5;
            color: var(--text-color-4);
          }
        }
        .el-tabs__item.is-active + .el-tabs__item {
          border-left: none;
        }
      }
    }
  }
  &--text {
    .el-tabs__header {
      &.is-left,
      &.is-right {
        .el-tabs__nav-wrap {
          .el-tabs__item {
            &::after {
              display: none;
            }
          }
        }
      }
      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
        .el-tabs__active-bar {
          display: none;
        }
        .el-tabs__item {
          line-height: 32px;
          max-width: 96px;
          padding: 0 15px;
          padding-left: 0px;
          overflow: hidden;
          color: var(--text-color-2);
          &:first-child {
            padding-left: 15px;
          }
          &.is-active {
            color: var(--text-color-5);
            &:hover {
              color: var(--text-color-5);
            }
          }
          &:hover {
            color: var(--text-color-1);
          }
          &::after {
            content: '|';
            margin-left: 15px;
            color: var(--text-color-4);
          }
          &:last-child {
            &::after {
              display: none;
            }
          }
        }
        .el-tabs__item.is-active + .el-tabs__item {
          border-left: none;
        }
      }
    }
  }
}

.lc-threeColumn {
  @include mixin.createCssFromStyles('&');
  & {
    display: flex;
    min-height: 200px;
  }
  &__left {
    flex: 0 0 calc(var(--left-width) - var(--left-interval));
    margin-right: var(--left-interval);
  }
  &__right {
    flex: 0 0 calc(var(--right-width) - var(--right-interval));
    margin-left: var(--right-interval);
  }
  &__left,
  &__right {
    position: relative;
    &--small {
      flex: 0 0 160px;
    }
  }
  &__left::after,
  &__right::before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    top: 0px;
    border-right: 1px dotted var(--line-segmentation-color);
  }
  &__left::after {
    right: calc(-1 * var(--left-interval));
  }
  &__right::before {
    left: calc(-1 * var(--right-interval));
  }
  &__middle {
    position: relative;
    flex: 1;
    width: 0;
    margin-left: var(--left-interval);
    margin-right: var(--right-interval);
  }
  &__left,
  &__middle,
  &right {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.lc-timeline {
  @include mixin.createCssFromOutsideBasicStyles('&.el-timeline');
}
.lc-steps {
  & {
    flex: 1;
    padding: 20px 10px 10px;
  }
  
  &__content {
    min-height: 300px;
    margin: 20px;
    border-bottom: 1px solid #e3e3e3;
  }
  @include mixin.createCssFromOutsideBasicStyles('&');
  
  .lc-steps__header {
    display: flex;
    justify-content: center;
    padding: 2px 0;
    color: #999;
    font-size: 14px;
    width: var(--steps-header-width, 100%);
    margin: 0 auto;
    .lc-step {
      // display: flex;
      line-height: 28px;
      // align-items: center;
      .lc-step__header {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
      }
      .lc-step__headerBase {
        display: flex;
        width: 100%;
        // align-items: center;
        .lc-step__header-style1 {
          flex-shrink: 0;
          .lc-step__icon {
            margin: 0 auto;
          }
          .lc-step__icon {
            margin: 0 auto;
          }
        }
        .lc-step__header-style3 {
          width: calc(100% - 32px);

          height: 32px;
          border: 1px solid #959595;
          border-right: none;
          position: relative;
          text-align: center;
          &.with-after::after {
            content: '';
            z-index: 10;
            // width: 22px;
            // height: 22px;
            width: calc(sin(45deg) * 32px);
            height: calc(sin(45deg) * 32px);
            border: 1px solid transparent;
            border-right-color: #959595;
            border-top-color: #959595;
            transform: rotate(45deg);
            position: absolute;
            top: 4px;
            right: -11px;
            // z-index: 2;
          }
          &.with-before {
            border-left-color: transparent;
            &::before {
              content: '';
              width: 32px;
              height: 32px;
              border: 1px solid var(--border-color-2);
              border-right-color: transparent;
              border-left-color: transparent;
              position: absolute;
              box-sizing: content-box;
              top: -1px;
              left: -33px;
            }
          }
          &.width-end {
            border-right: 1px solid var(--border-color-2);
          }
          &:hover {
            background-color: var(--block-bg-color-3);
            border-color: transparent;
            color: var(--text-color-inverse);
          }
          &:hover::before {
            background-color: var(--block-bg-color-3);
            width: 0;
            height: 0;
            border-bottom: 17px solid var(--block-bg-color-3);
            border-left: 16px solid var(--background-color, #fff);
            border-right: 17px solid var(--block-bg-color-3);
            border-top: 17px solid var(--block-bg-color-3);
          }
          &:hover::after {
            background-color: var(--block-bg-color-3);
            border-left-color: transparent;
          }
        }
        .lc-step__header-style4 {
          width: 100%;
          height: 32px;
          background-color: var(--block-bg-color-2);
          border: 1px solid var(--border-color-2);
          border-right: none;
          color: var(--text-color-1);
          text-align: center;
          &.is-last {
            border-right: 1px solid var(--border-color-2);
          }
          &:hover {
            background-color: var(--block-bg-color);
            border-bottom-color: var(--block-bg-color);
          }
        }
      }
      .lc-step__main {
        width: 95%;
      }
      &:last-of-type {
        flex-basis: auto !important;
        flex-shrink: 0;
      }
      .lc-step__icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        text-align: center;
        line-height: 28px;
        border: 1px solid var(--text-color-4);
        flex-shrink: 0;
      }
      .lc-step__title {
        flex-shrink: 0;
        margin-left: 8px;
        text-wrap: nowrap;
      }
      .lc-step__line {
        width: 100%;
        height: 0px;
        margin: 14px 10px;
        border: 0;
        border-top: 1px solid #ccc;
      }
      &.is-success {
        .lc-step__icon {
          border-color: var(--primary-color);
          color: var(--primary-color);
          background: transparent;
        }
        .lc-step__title {
          color: var(--text-color-2);
        }
        .lc-step__line {
          border-color: var(--primary-color);
        }
        .lc-step__header-style3 {
          background-color: var(--block-bg-color-3);
          color: var(--text-color-inverse);
          &::after {
            background-color: var(--block-bg-color-3);
          }
          &::before {
            background-color: var(--block-bg-color-3);
            border-bottom: 15px solid var(--block-bg-color-3);
            border-left: 14px solid var(--block-bg-color);
            border-right: 14px solid var(--block-bg-color-3);
            border-top: 15px solid var(--block-bg-color-3);
          }
        }
      }
      &.is-process {
        .lc-step__icon {
          color: var(--block-bg-color);
          background: var(--primary-color);
          border: none;
        }
        .lc-step__title {
          color: var(--text-color-1);
        }
        .lc-step__header-style3 {
          background-color: var(--primary-color);
          color: var(--block-bg-color);
          &::after {
            background-color: var(--primary-color);
          }
          &::before {
            background-color: var(--primary-color);
            border-bottom: 15px solid var(--primary-color);
            border-left: 14px solid var(--block-bg-color);
            border-right: 14px solid var(--primary-color);
            border-top: 15px solid var(--primary-color);
          }
        }
        .lc-step__header-style4 {
          background-color: var(--block-bg-color);
          border-bottom-color: var(--block-bg-color);
        }
      }
      .lc-step__mask {
        display: flex;
        cursor: pointer;
        flex-shrink: 0;
        &:hover {
          background: rgba(var(--primary-color), 0.2);
          .lc-step__icon {
            transform: scale(0.8);
          }
        }
      }
    }
  }
  .lc-steps__header-round {
    .lc-step {
      .lc-step__round {
        background: #f1f1f1;
        border-radius: 14px;
        display: flex;
        padding: 0 8px;
        flex-shrink: 0;
      }
      .lc-step__icon {
        width: 14px;
        height: 14px;
        line-height: 14px;
        margin-top: 6px;
        margin-left: 5px;
      }
      .lc-step__title {
        margin: 0;
      }
      .lc-step__line {
        border-style: dashed;
        position: relative;
        &:after {
          border: 5px solid transparent;
          border-left: 10px solid transparent;
          border-left-color: inherit;
          position: absolute;
          content: '';
          top: 50%;
          margin-top: -5px;
          left: 100%;
          margin-left: -8px;
        }
      }
      &.is-success,
      &.is-process {
        .lc-step__round {
          border: 1px solid var(--primary-color);
          background: var(--block-bg-color);
          .lc-step__title {
            color: var(--primary-color);
          }
        }
      }
      .lc-step__mask:hover {
        background: transparent;
        .lc-step__round {
          background: rgba(var(--primary-color), 0.2);
        }
      }
    }
  }
}
.lc-steps__tree {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 14px;
  &-header {
    max-width: 50%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .lc-step {
      height: 100%;
      .lc-step__icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        text-align: center;
        line-height: 28px;
        border: 1.5px solid var(--text-color-4);
        background-color: var(--text-color-4);
        color: var(--text-color-inverse);
        flex-shrink: 0;
        &-error {
          font-size: 28px;
          color: #d70016;
        }
      }
      &__header {
        display: flex;
        height: 100%;
        .lc-step__left {
          height: 100%;
          .lc-step__line {
            height: calc(100% - 48px);
          }
        }
        .lc-step__info {
          margin-left: 15px;
          color: var(--text-color-3);
          &-title {
            color: var(--text-color-2);
            font-weight: bold;
            line-height: 28px;
            text-wrap: nowrap;
          }
          &-desc {
            color: var(--text-color-3);
          }
        }
      }
      &.is-success {
        .lc-step__icon {
          border-color: var(--primary-color);
          color: var(--primary-color);
          background: transparent;
        }
        .lc-step__title {
          color: var(--text-color-2);
          font-weight: bold;
        }
        .lc-step__line {
          border-color: var(--primary-color);
        }
      }
      &.is-process {
        .lc-step__icon {
          color: var(--text-color-inverse);
          background: var(--primary-color);
          border: none;
        }
        .lc-step__title {
          color: var(--text-color-2);
        }
      }
    }
  }
  &-contents {
    flex: 1;
  }
  .lc-step__line {
    width: 0px;
    border: 0;
    border-left: 2px solid var(--text-color-4);
    margin: 10px 10px auto 14px;
  }
}

.lc-step__icon {
  margin: 0 auto;
  .el-icon {
    height: inherit;
    line-height: inherit;
  }
}

.lc-list {
  padding: 10px;
  &-header {
    padding: 5px;
  }
  &-body__row {
    min-height: 100px;
    padding: 10px;
    margin: var(--list-item-interval) 0;
    display: flex;
    .index {
      display: var(--list-item-indexed);
      width: var(--list-item-index-width);
      line-height: var(--input-height);
    }
    .content {
      flex: 1;
    }
  }
}

.lc-tree {
  @include mixin.createCssFromStyles('& .el-tree');
  &__customNode {
    display: flex;
    justify-content: space-between;
    flex: 1;
    &-operates {
      .svg-icon + .svg-icon {
        margin-left: 5px;
      }
    }
  }
}

.lc-sheet {
  & > table {
    background: #b4b4b4;
    width: fit-content;
    border-spacing: 0px;
    border-collapse: collapse;
    empty-cells: show;
    table-layout: fixed;
    text-align: initial;
    display: inline-block;
    & td {
      height: 1px;
      min-height: 1px;
      border: 1px solid var(--text-color-3);
      background: #fff;
      padding: 5px;
      .el-input {
        --form-input-width: 100% !important;
      }
      .lc-label {
        line-height: 1.5;
      }
    }

    & thead {
      td {
        background: none;
      }
    }
    & thead {
      td {
        background: none;
      }
    }
    & > tbody {
      & > tr > td:first-child {
        // visibility: collapse;
        width: 0px !important;
        padding: 5px 0px;
        border: none;
      }
    }
  }
}
